<template>
	<view class="wrap">
		<view class="header">
			<view class="content">
				<view class="userInfo">
					<view class="border">
						<u--image :src="`${baseUrl}${userInfo.headPic}`" width="140rpx" height="140rpx" shape="circle"></u--image>
					</view>

					<view class="nickName">
						<view class="phone" @click="login">{{userInfo.phone||"点击登录"}}</view>
						<view class="text">ID:{{userInfo.id||""}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="about">
			<view class="name">
				<!-- <u--image  src="http://39.99.135.50:8080/farm-img/logo.png" width="44rpx" height="44rpx" shape="circle"></u--image> -->
				<view class="title">我的订单</view>
				<view class="arrow">
					<view class="text" @click="jumpOrder(-1)">全部订单</view>
					<u-icon name="arrow-right" size="10" color="#666"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in imageList" :key="item.id" @click="jumpOrder(item.id)">
					<u--image :src="item.url" width="72rpx" height="72rpx" shape="circle"></u--image>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="cell">
			<view class="item" v-for="item in cellList" @click="toJump(item.url)" :key="item.id">
				<view class="text">{{item.name}}</view>
				<u-icon name="arrow-right" size="10" color="#666"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			baseUrl:getApp().globalData.baseImgUrl,
			avatar: '/static/userCenter/avatar.jpg',
			// src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			userInfo: {},
			integralTotal: '',
			userTree: 0,
			imageList: [
				{
					id: '0',
					name: '待付款',
					url: '/static/userCenter/dfk.png'
				},
				{
					id:' 1',
					name: '进行中',
					url: '/static/userCenter/jxz.png'
				},
				{
					id: '2',
					name: '已完成',
					url: '/static/userCenter/ywc.png'
				},{
					id: '3',
					name: '已取消',
					url: '/static/userCenter/dqr.png'
				}
			],
			cellList: [
				{
					id: 1,
					name: '服务地址',
					url:'/pages/addressList/addressList'
				},
				{
					id: 2,
					name: '我的资料',
					url:'/pages/myInfo/myInfo'
				},
				{
					id: 3,
					name: '服务协议',
					url:'/pages/agreement/agreement'
				},
				{
					id: 4,
					name: '联系客服',
					url:'/pages/customerService/customerService'
				}
			]
		};
	},
	onLoad() {
		this.login();
	},
	methods: {
		login(){
			let that = this
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					console.log(res)
					that.userInfo = res.data;
					
				},
				fail(err) {
					uni.redirectTo({
						url: '../login/index'
					});
				}
			});
		},
		toJump(url) {
			console.log(url)
			uni.navigateTo({
				url
			});
		},
		jumpOrder(e){
			console.log(e)
			getApp().globalData.active = e
			uni.switchTab({
				url:`/pages/orderList/orderList`
			})
		},
		// call() {
		// 	uni.makePhoneCall({
		// 		phoneNumber: '17693221516' //仅为示例
		// 	});
		// }
	}
};
</script>

<style lang="scss" scoped>
uni-button {
	background-color: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
uni-button:after {
	border: none;
}
button {
	background-color: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
button:after {
	border: none;
}
.wrap {
	box-sizing: border-box;
	// background-color: #F7F7F7;
	width: 100%;
	position: relative;
	overflow-x: hidden;
	.header {
		// position: absolute;
		position: relative;
		height: 375rpx;
		width: 110%;
		margin-left: -5%;
		background: #21b579;
		position: relative;
		border-bottom-right-radius: 30%;
		border-bottom-left-radius: 30%;
		color: #fff;
		overflow-x: hidden;
		.content {
			width: 80%;
			position: relative;
			// background-color: #E8C8A2;
			margin: 0 auto;
			// margin-left: 10%;

			.userInfo {
				padding: 30rpx 0%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 28rpx;

				// font-weight: 600;
				.nickName {
					margin-left: 40rpx;
					.phone {
						font-weight: bold;
					}
					.text {
						margin-top: 10rpx;
					}
				}
				.border {
					border: 2rpx #fff solid;
					border-radius: 100%;
					padding: 5rpx;
				}
			}
		}
	}
	.about {
		position: absolute;
		width: 82%;
		height: 152rpx;
		// top: 250rpx;
		// margin: 0 auto;
		top: 246rpx;
		background: #fff;
		color: #666;
		left: 5%;
		font-size: 30rpx;
		// display: flex;
		// justify-content: space-between;
		align-items: center;
		padding: 20rpx 4%;
		border-radius: 16rpx;
		.name {
			display: flex;
			color: #333;
			justify-content: space-between;
			align-items: center;
			.arrow {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #666;
				display: flex;
			}
			.title {
				font-size: 28rpx;
				font-weight: 500;
			}
		}
		.list {
			display: flex;
			margin-top: 10rpx;
			justify-content: space-between;
			align-items: center;
			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #666;
			}
		}
	}
	.cell {
		width: 90%;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		.item {
			background-color: #fff;
			// width: 100%;
			text-align: center;
			display: flex;
			// flex-direction: column;
			align-items: center;
			justify-content: space-between;
			border-radius: 16rpx;
			padding: 32rpx;
			margin: 32rpx 0;
			.left {
				// margin-top: 20rpx;
				font-size: 28rpx;
				color: #333;
			}
			.arrow {
				font-size: 18rpx;
				color: #666;
			}
		}
	}
}
</style>
